<script setup lang="ts">
import { computed } from 'vue';

// 静态引入所有图片
import stationIcon from '@/assets/largescreen/station-icon.png';
import sunIcon from '@/assets/largescreen/sun.png';
import humidityIcon from '@/assets/largescreen/humidity.png';
import pressureIcon from '@/assets/largescreen/pressure.png';
import windIcon from '@/assets/largescreen/wind.png';
import windForceIcon from '@/assets/largescreen/wind-force.png';
import precipitationIcon from '@/assets/largescreen/precipitation.png';
import { useAssistStore } from '@/store/modules/Assist/useAssistStore';

const { weatherData } = storeToRefs(useAssistStore());

const windDirection = computed(() => {
  if (!weatherData.value.windDirection) return '暂无';
  const directions = ['北风', '东北风', '东风', '东南风', '南风', '西南风', '西风', '西北风', '北风'];
  const degreesPerDirection = 360 / directions.length;
  let directionIndex = Math.floor(((Number(weatherData.value.windDirection) + 11.25) % 360) / degreesPerDirection);
  directionIndex = directionIndex % directions.length;
  return directions[directionIndex];
});

// 气象数据项配置
const weatherItems = computed(() => [
  [
    {
      icon: sunIcon,
      value: weatherData.value.temp,
      unit: '℃',
      label: '温度'
    },
    {
      icon: humidityIcon,
      value: weatherData.value.humidity,
      label: '湿度'
    },
    {
      icon: pressureIcon,
      value: weatherData.value.pressure,
      label: '气压(hPa)'
    }
  ],
  [
    {
      icon: windIcon,
      value: windDirection.value,
      label: '风向'
    },
    {
      icon: windForceIcon,
      value: weatherData.value.windPower,
      label: '风力'
    },
    {
      icon: precipitationIcon,
      value: weatherData.value.rainfall,
      label: '降水概率'
    }
  ]
]);
</script>

<template>
  <div class="weather-container">
    <div v-for="(row, rowIndex) in weatherItems" :key="rowIndex" class="weather-row">
      <div v-for="(item, itemIndex) in row" :key="itemIndex" class="weather-item">
        <img :src="stationIcon" alt="气象站图标" class="station-icon" />
        <div class="weather-value">
          <img :src="item.icon" :alt="item.label" class="weather-icon" />
          <span>{{ item.value || '暂无' }}{{ item.unit }}</span>
        </div>
        <div class="weather-label">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.weather-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/largescreen/blue-kuang.png);
  background-size: 100% 100%;
  padding: 20px;
  box-sizing: border-box;
  color: white;
}

.weather-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;

  &:last-child {
    margin-bottom: 0;
  }
}

.weather-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
  width: 30%;
}

.station-icon {
  width: 6.375rem;
  height: 2.875rem;
}

.weather-value {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;

  span {
    font-weight: 700;
  }
}

.weather-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.weather-label {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
</style>
